<template>
  <draggable class="muti-equal-container" draggable=".item" :group="{ name: 'cc', pull: 'clone', put: false }">
    <el-row :gutter="20">
      <draggable v-model="dlist" @change="listContainerChange" :disabled="disabled" class="list-group-c" draggable=".item0"
        :group="{ name: 'bb', put: false }">
        <el-col class="item0" :span="getEqualDivisionSpan(index)" :style="setFullBorderPadding(index)" tag="div"
          v-for="(item, index) in dlist" :key="index">
          <draggable :list="item.list" @change="listChange" class="list-group" draggable=".item" group="aa">
            <slot class="item" name="item" v-bind="item.list"></slot>
          </draggable>
        </el-col>
      </draggable>
    </el-row>
  </draggable>
</template>

<script>
import draggable from "vuedraggable";
import componentProperties from "@/utils/componentProperties";
export default {
  name: 'mutiEquaContainer',
  components: {
    draggable
  },
  data () {
    return {
      dlist: [],
      disabled: false
    }
  },
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      }
    },
    datas: {
      type: Array
    }
  },
  watch: {
    list: {
      handler (val) {
        if (val.length > 0) {
          // this.disabled = true;
          this.dlist = val;
        } else {
          this.createDatas();
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    setFullBorderPadding (index) {
      return index === 0 ? 'padding-left: 0' : index === this.dlist.length - 1 ? 'padding-right: 0' : '';
    },
    listContainerChange (val) {
      if (val.moved) {
        this.$emit('update:list', this.dlist);
      }
    },
    listChange (val) {
      console.log('val--------', val);
      this.dlist.forEach(res => {
        this.recursiveTraverse(res, (re, ii) => {
          if (re.active === true) {
            re.active = false;
          }
        })
      });
      if (val.added) {
        // val.added.element.active = true;
        // this.$forceUpdate();
        const comp = val.added.element;
        comp.setStyle = JSON.parse(JSON.stringify(componentProperties.get(comp.name).setStyle));
        this.$emit('activeCom', val.added.element);
      }
      this.$emit('update:list', this.dlist);
    },
    recursiveTraverse (node, action) {
      action(node);
      if (!node || !node.list || node.list.length === 0) {
        return;
      }
      node.list.forEach((item) => {
        this.recursiveTraverse(item, action);
      });
    },
    // 改变容器数量
    changeContainerNumber (number) {
      const arr = [];
      for (let index = 0; index < number; index++) {
        const element = {
          list: [],
          type: 'containers',
          ratio: Number(1 / number).toFixed(2),
          direction: "0",
          group: index
        }
        arr.push(element);
      }
      this.dlist = arr;
      this.$emit('update:list', this.dlist);
    },
    createDatas () {
      this.dlist = [
        {
          list: [],
          type: 'containers',
          ratio: '0.5',
          direction: "0",
          group: 0
        },
        {
          list: [],
          ratio: '0.5',
          type: 'containers',
          direction: "0",
          group: 1
        }
      ];
    }
  },
  computed: {
    getEqualDivisionSpan () {
      return function (index) {
        return Math.floor(24 / this.dlist.length);
        // index == 0 ? 16 : 8;
        // 24 / this.dlist.length;
      }
    }
  },
  created () {
    // this.dlist = [];
  }
}
</script>

<style scoped lang="scss">
.muti-equal-container,
.list-group-c {
  height: 100%;
}

.muti-equal-container {
  .list-group {
    color: white;
    border: 1px #888888 dashed;
    // text-align: center;
    height: 100%;
    cursor: pointer;
    min-height: 800px;
    border-radius: 14px;
  }
}
</style>
<style lang="scss">
.muti-equal-container {
  .el-row {
    height: 100% !important;
    margin: 0 !important;
  }

  .el-col {
    height: 100%;
  }
}
</style>
